<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']" >
			<u-form-item v-if="appType === 'app-tch' || appType === 'mp-tch'" label="宝宝">
				<view class="children-view">
					<children-list-view @showClasses="showClasses" :childrenList="childrenList"
						@itemClick="childrenItemClick"></children-list-view>
				</view>
			</u-form-item>
<!-- 			<u-form-item label="标题" prop="title">
				<u-input v-model="form.title" />
			</u-form-item> -->
			<u-form-item label="分享内容" prop="content">
				<u-input v-model="form.content" type="textarea"/>
			</u-form-item>
			<u-form-item label="照片">
				<x-upload
					ref="uUpload"
					:form-data="formData"
					@onUploaded="onUploaded"
					:hasVideo="true"
				/>
			</u-form-item>
		</u-form>
		<view style="display: flex;justify-content: center;align-items: center;margin-top: 100rpx;margin-bottom: 30rpx;">
			<view class="common-btn" @click="submit">确认</view>
		</view>
		<children-select-view ref="popupConpare" @confirm="confirm"></children-select-view>
	</view>
</template>

<script>
	import {
		liveRecordAdd,
		feedPost,
	} from '@/api/feed.js'
	import ChildrenListView from '@/components/children-list-view.vue'
	import ChildrenSelectView from '@/components/children-select-view.vue'
	import XUpload from '@/components/x-upload'
	import { mapState } from 'vuex'
	import { http } from '@/api/service.js'
	export default {
		components: {
			ChildrenListView,
			ChildrenSelectView,
			XUpload
		},
		computed: {
			...mapState({
				appType: state => state.app.appType
			})
		},
		data() {
			return {
				childrenList: [],
				form: {
					title: '',
					content: '',
				},
				rules: {
					title: [
						{ 
							required: true, 
							message: '请输入标题', 
						}
					],
					content: [
						{ 
							required: true, 
							message: '请输入内容', 
						}
					],
				},

				formData: {
					'bizType': 'live-record'
				},

				isCourse: false,
				category: '3',
				coursePlanId: '',
			}
		},
		onLoad(options) {
			console.log(options);
			this.isCourse = options.isCourse;
			this.category = options.category;
			this.coursePlanId = options.coursePlanId;
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			showClasses() {
				this.$refs.popupConpare.open();
			},
			confirm(res) {
				for (let index in res) {
					let item = res[index];
					if (this.childrenList.indexOf(item) === -1) {
						this.childrenList.push(item);
					}
				}
			},

			childrenItemClick(index) {
				this.childrenList.splice(index, 1);
			},

			submit() {
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					if (this.childrenList.length === 0) {
						this.$u.toast('请先选择宝宝');
						return;
					}
				}

				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						uni.showLoading({})
						this.$refs.uUpload.upload();
						return;
					}
				});
			},
			
			addFeed() {
				if (this.isCourse === 'true') {
					console.log(this.isCourse);
					this.form.category = this.category;
					this.form.coursePlanId = this.coursePlanId;
				}
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					let childrenIds = '';
					for (let index in this.childrenList) {
						let children = this.childrenList[index];
						childrenIds += `,${children.id}`;
					}
					if (childrenIds.length > 0) {
						childrenIds = childrenIds.substring(1);
					}
					this.form.childrenIds = childrenIds;
				}
				console.log(this.form);
				this.add();
			},
			
			add() {
				// uni.showLoading({})
				if (this.appType === 'app-tch' || this.appType === 'mp-tch') {
					liveRecordAdd(this.form).then(res => {
						this.addSuccess(res);
					});
				} else{
					feedPost(this.form).then(res => {
						this.addSuccess(res);
					})
				}
			},

			addSuccess(res) {
				uni.hideLoading()
				console.log(res);
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('pushSuccessEvent', {
					data: 'test'
				});
				uni.navigateBack({})
			},
			onUploaded(data) {
				this.form.resourceUrl = data.resourceUrl;
				this.form.mediaType = data.mediaType; 
				this.addFeed();
			},
		}
	}
</script>
<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import "@/css/u-form.scss";
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.children-view {
		width: 10rpx;
		flex: 1;
		display: flex;
		flex-direction: row;
	}

	.action-view {
		margin-top: 60rpx;
	}
</style>
